<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .el-header, .el-footer {
        background-color:#242f41;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #324158;
        color: #333;
        text-align: center;
        line-height: 200px;
        height: 660px;
    }

    .el-main {
        padding: 0;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
<body>
<div id="app">

    <el-container>
        <el-header>
            <h1 style="color: white">欢迎您:{{empInfo.name}}</h1>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu class="el-menu-vertical-demo"
                         background-color="#324158"
                         text-color="white"
                         active-text-color="#ffd04b"
                >

                    <el-submenu v-for="(m,i) in empMenu" :index="m.id">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{m.name}}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(s,si) in m.subMenu" :index="s.id" @click="addTab(s)">
                                <i class="s.icon"></i>{{s.name}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                </el-menu>
            </el-aside>
            <el-main>
                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane
                            key="0"
                            label="欢迎页"
                            name="0">
                        欢迎光临
                    </el-tab-pane>
                    <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.id"
                            :label="item.name"
                            :name="item.id">
                        <iframe style="width: 98%;height: 750px;border: 0;" :src="item.url"  ></iframe>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>

</div>

<script>
    $.get("/aaa/admin/getInfo",function (backData) {
            haha.empMenu = backData.data.currentPermission;
            haha.empInfo = backData.data.currentEmp;
    });

    var haha = new Vue({
        el:"#app",
        data:{
            editableTabsValue:"0",
            editableTabs:[],
            empMenu:[],
            empInfo:{},

        },
        methods:{
            addTab(s){
                if( haha.editableTabs.indexOf(s)<0 ){
                    haha.editableTabs.push(s);
                }
                haha.editableTabsValue = s.id
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.id;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.id !== targetName);
            }
        }
    })
</script>
</body>
</html>